<template>
  <div class="main-container">
    <div class="paper-title">
      <div>
        <el-button @click="handleEvaluationBack">取消批阅</el-button>
        <el-button type="primary" @click="handleEvaluation">提交批阅</el-button>
      </div>
      <div>
        <div class="title">{{ examInfo.paperName }}</div>
        <div class="desc">（总分：{{ examInfo?.totalScore }}分，时长：{{ examInfo.answerTime }} 分钟）</div>
      </div>
      <div>
        最终得分：{{ handleTotalScore() }} 分
        <el-tag v-if="examInfo.passStatus === 1" type="success">待阅卷</el-tag>
        <el-tag v-if="examInfo.passStatus === 2" type="success">合格</el-tag>
        <el-tag v-if="examInfo.passStatus === 3" type="danger">不及格</el-tag>
      </div>
    </div>
    <el-row :gutter="20" class="paper-body">
      <el-col :span="4" class="paper-card">
        <card v-if="examInfo" :titles="examInfo.titles" @click="handleClickOption" />
      </el-col>
      <el-col :span="16" class="paper-question">
        <div v-for="(item, index) in examInfo.titles" :key="index">
          <div class="title">
            <div class="name">{{ item.titleName }}</div>
          </div>
          <div v-for="(itemSub, indexSub) in item.questions" :key="indexSub">
            <!--题目-->
            <question :question="itemSub" :index="indexSub + 1" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="paper-evaluation">
        <list v-if="evaluationList" :evaluation-list="evaluationList" :record-id="route.query.recordId" :loading="loading" @callback="handleNextEvaluation" />
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import { computed, onMounted, reactive, ref } from 'vue'
  import { examApi } from '@/api/exam'
  import { useRoute, useRouter } from 'vue-router'
  import Card from './Card.vue'
  import Question from './Question.vue'
  import List from './List.vue'
  import { ElMessageBox } from 'element-plus'
  const route = useRoute()
  const router = useRouter()

  // 计算考试得分
  const handleTotalScore = computed(() => {
    return function () {
      let total = 0
      if (examInfo.titles) {
        examInfo.titles.forEach((title) => {
          title.questions.forEach((question) => {
            if (question.userScore) {
              total += question.userScore
            }
          })
        })
      }
      return total
    }
  })

  // 批阅
  const loading = ref(false)
  const handleNextEvaluation = async (nextRecordId) => {
    loading.value = true
    await evaluationComment(route.query.recordId)
    await init(nextRecordId)
    await intEvaluationList()
    await router.push({
      path: '/exam/record/evaluation',
      query: { examId: route.query.examId, recordId: nextRecordId }
    })
    loading.value = false
  }

  // 批阅列表
  const evaluationList = reactive([])
  const intEvaluationList = async () => {
    const res = await examApi.examEvaluationList({ examType: examInfo.examType, relateId: route.query.examId })
    Object.assign(evaluationList, res)
  }

  // 提交批阅
  const handleEvaluation = async () => {
    await evaluationComment(route.query.recordId)
    await router.push({ path: '/exam/record', query: { examId: route.query.examId } })
  }

  /**
   * 结束批阅
   * @param recordId
   */
  async function evaluationComment(recordId) {
    const evaluationModel = { recordId: recordId, results: [] }
    examInfo.titles.forEach((item) => {
      item.questions.forEach((itemSub) => {
        evaluationModel.results.push({ answerId: itemSub.userAnswerId, userScore: itemSub.userScore, evaluationComment: itemSub.evaluationComment })
      })
    })
    await examApi.examEvaluationEnd(evaluationModel)
  }

  // 退出批阅
  const handleEvaluationBack = () => {
    ElMessageBox.confirm('退出批阅将不会对本次批阅进行保存，批阅状态会变更为完成，是否继续？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await examApi.examEvaluationStatus({ recordId: route.query.recordId, examStatus: 4 })
      await router.push({ path: '/exam/record', query: { examId: route.query.examId } })
    })
  }

  // 点击答题卡选项
  const handleClickOption = (index) => {
    if (document.getElementById(index)) {
      document.getElementById(index).scrollIntoView()
    }
  }

  const examInfo = reactive({})
  onMounted(async () => {
    if (route.query.recordId) {
      // 考试信息
      await init(route.query.recordId)
      // 批阅列表
      await intEvaluationList()
    }
  })

  async function init(recordId) {
    const res = await examApi.examEvaluationStart({ recordId: recordId })
    Object.assign(examInfo, res)
    examInfo.titles.forEach((item) => {
      item.questions.forEach((itemSub) => {
        if (itemSub.questionType === 2) {
          // 多选题答案处理
          itemSub.questionAnswer2 = itemSub.questionAnswer.split('|')
          itemSub.userAnswer2 = itemSub.userAnswer.split('|')
        }
        if (itemSub.questionType === 4) {
          // 填空题答案处理
          itemSub.questionAnswer4 = itemSub.questionAnswer.split('|')
          itemSub.userAnswer4 = itemSub.userAnswer.split('|')
        }
      })
    })
  }
</script>
<style lang="scss" scoped>
  .paper-title {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .desc {
      font-size: 12px;
    }
  }
  .paper-body {
    border-top: solid 1px #dcdfe6;
    .paper-card {
      border-right: solid 1px #dcdfe6;
      padding-top: 20px;
    }
    .paper-question {
      height: calc(100vh - 200px);
      padding-top: 20px;
      overflow: auto;
      .title {
        margin-bottom: 10px;
      }
    }
    .paper-evaluation {
      border-left: solid 1px #dcdfe6;
    }
  }
</style>
